<template>
	<div class="outer">
    <headers @back-click="back()" :headers="headers"></headers>
    <scroll :topArea="44" ref="collectPage" @pullingDown="onpullingDown" @pullingUp="onpullingUp" :data="productList">
      <div class="promotion-pic">
          <img :src="headImg" alt="广告图片">
      </div>
      <div class="collect-pro-content">
        <div class="collect-pro-item" v-for="p in productList" @click="goDetail(p)">
          <div class="img-area">
              <img :src="p.imgPro" alt="图片">         
          </div>
          <div class="content-area">
            <div>[{{p.oldLevelStr}}] {{p.name}}</div>
            <div class="leasePrice"><span>¥&nbsp;</span>{{ p.leaseType == "DAILY" ? (p.displayRent/100).toFixed(2) : (p.displayRent*30/100).toFixed(2)}}<span>/ {{p.leaseType == "DAILY" ? "天" : "月"}} 起</span></div>
          </div>
          <span class="top-pic"></span>
        </div>
      </div>
    </scroll>
  </div>
</template>

<script>
import {getCollectData} from "@/api/homepage.js"
export default {
  name: 'collectPage',
  data: function(){
    return {
      headers: {
        title: "聚合页"
      },
      headImg: '',
      collectiveName: '',
      productList: [],
      pageNum: 1,
      pageSize: 10,
      hasMore: true
    }
  },
  components: {
  },
  methods: {
    back: function(){
      this.$router.go(-1);
    },
    collectData: function(){
      this.pageNum = 1;
      getCollectData(this.$route.params.id,this.pageNum).then( data => {
        if(data.code == 200){
          this.headImg = data.data.imgFull;
          this.collectiveName = data.data.gatherPageName;
          this.productList = data.data.pageInfo.list;
          this.productList.forEach(function(item){
              item.imgPro = item.imgFull[0].url + '?x-oss-process=image/format,jpg/interlace,1/quality,q_90/resize,w_' + parseInt(window.innerWidth/2);
          })
          if(this.productList.length < this.pageSize){
            this.hasMore = false;
          }else {
            this.hasMore  = true;
          }
        }else {
          this.$vux.toast.show({
            text: data.message,
            time: 1000,
            width: 'auto',
            // position: 'middle'
          })
        }
      })
    },
    loadMore: function(){
      if(this.hasMore == false){
        this.$refs.collectPage.forceUpdate()
        return
      }
      this.pageNum++;
      getCollectData(this.$route.params.id,this.pageNum).then( data => {
        if(data.code == 200){
          if(data.data.pageInfo.list){
            let tempList = data.data.pageInfo.list;
            tempList.forEach(function(item){
              item.imgPro = item.imgFull[0].url + '?x-oss-process=image/format,jpg/interlace,1/quality,q_90/resize,w_' + parseInt(window.innerWidth/2);
            });
             this.productList =  this.productList.concat(tempList);
             if(data.data.pageInfo.list.length < this.pageSize){
                this.hasMore = false
              }else {
              this.hasMore = true;
             }
          }else {
            this.hasMore = false;
            this.$refs.collectPage.forceUpdate()
          }
        }else {
          this.$vux.toast.show({
            text: data.message,
            time: 1000,
            width: 'auto',
            // position: 'middle'
          })
          this.hasMore = false;
          this.$refs.collectPage.forceUpdate()
        }
      })
    },
    goDetail: function(i){
       this.$router.push({name:'choose' , params: {'id': i.id}});
    },
    onpullingDown: function(){
      // this.$refs.collectPage.destroy();
      // this.$refs.collectPage.initScroll();
      this.collectData();
    },
    onpullingUp: function(){
      this.loadMore();
    }
  },
  mounted: function(){
    this.collectData();
  }
}
</script>
<style lang="scss" scoped>
.outer {
    height: 100%;
    width: 100%;
    position: absolute;
  }
  .promotion-pic {
    width: 100%;
    background: #fff;
    &>img {
      height: 100%;
      width: 100%;
    }
  }
  .collect-pro-content {
    background-color: #fff;
    padding: 16px;
    margin-top: 16px;
    & .collect-pro-item {
      height: 112px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding: 16px;
      border: 1px solid #eee;
      border-radius: 5px;
      margin-bottom: 16px;
      & .img-area {
        width: 88px;
        height: 88px;
        background: #eee;
        margin-right: 11px;
        &>img {
          width: 100%;
          height: 100%;
        }
      }
      & .content-area {
        width: 210px;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        &>div{
          color: #666;
          &:first-child {
            width: 230px;
            font-size: 16px;
            line-height: 20px;
            display:block;
            white-space:nowrap; 
            overflow:hidden; 
            text-overflow:ellipsis
          }
          &.leasePrice {
            line-height: 20px;
            color: #ff4000;
            margin-top: 8px;
            &>span {
              font-size: 13px;
            }
          }
        }
      }
    }
  }
</style>